<template>
    <div class="video-banner text-tiny text-center" :class="{ 'height-auto': heightAuto }" :style="{'height':sceenWidth+'px'}">
        <div class="inner">
            <video v-if="(type === 'video' || !images || images.length === 0) && video" :controls="false" object-fit="cover" autoplay :src="video"></video>
            <wx-swiper
                v-else
                class="swipper white-bg"
                @change="onBannerChange"
                autoplay="true"
                interval="3000"
                duration="1000"
                circular="true">
                <wx-swiper-item class="swiper-item" v-for="(item, index) in images" @click="onClickBanner(item)" :key="index">
                    <img class="swiper-image" :src="item.image ? item.image : item" mode="aspectFill" />
                </wx-swiper-item>
            </wx-swiper>
        </div>
        <div @click="onChangeShareBoxVisible" v-if="hasShareBox" class="share-icon white-color icon">&#xe603;</div>
        <div v-if="video && images && images.length > 0" class="btn-select-box">
            <div @click="onClickType('video')" class="btn white-bg" :class="{ 'primary-bg white-color': type === 'video'}">视频</div>
            <div @click="onClickType('img')" class="btn white-bg" :class="{ 'primary-bg white-color': type === 'img'}">图片</div>
        </div>
        <div class="current-box white-color" v-if="type === 'img' && images && images.length">
            {{current + 1}}/{{images.length}}
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
    name: 'VideoBanner',
})
export default class VideoBanner extends Vue {
    @Prop({ type: Boolean, default: false }) public heightAuto: any;

    /** 视频 */
    @Prop({ type: String }) public video: any;

    @Prop({ type: Array, default() { return []; } }) public images: any;

    @Prop({ type: Boolean, default: false }) public hasShareBox: any;

    public type: any = 'img';
    public current: any = 0;

    public sceenWidth: any = 0;



    public onClickType(type: any) {
        this.type = type;
    }

    public onBannerChange(e: { detail: { current: number } }) {
        this.current = e.detail.current;
    }

    public onChangeShareBoxVisible() {
        this.$emit('share');
    }

    public onClickBanner(item: any) {
        this.$emit('banner', item);
    }

    public created() {
        this.current = 0;

        // 获取手机屏幕宽度
        wx.getSystemInfo({
            success: res => {
        //         console.log('getSystemInfo::',res)
                this.sceenWidth = res.screenWidth;
            }
        })
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.video-banner {
    position: relative;
    width: 100%;
    height: 240px;
    &.height-auto {
        height: 100%;
    }
    .inner,
    .swipper {
        width: 100%;
        height: 100%;
        video {
            width: 100%;
            height: 100%;
        }
    }
    .swiper-image {
        width: 100%;
        height: 100%;
    }
    .share-icon {
        position: absolute;
        top: 40rpx;
        right: 40rpx;
        font-size: 40rpx;
    }
    .btn-select-box {
        position: absolute;
        bottom: 40rpx;
        left: 50%;
        transform: translateX(-50%);
        .btn {
            display: inline-block;
            min-width: 60rpx;
            padding: 4rpx 8rpx;
            border-radius: 10px;
            &:not(:last-child) {
                margin-right: 10px;
            }
        }
    }
    .current-box {
        position: absolute;
        right: 40rpx;
        bottom: 40rpx;
        min-width: 50rpx;
        padding: 6rpx 8rpx;
        border-radius: 10px;
        background: rgba(106, 106, 106, 0.72);
    }
}

</style>
